<template>
  <div class="box">
    <el-container class="box_container">
      <el-header class="header">
        <div class="logo">
          <img src="../assets/logo.png" alt />
          <p>优购商城后台管理系统</p>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <el-container class="bodyconiter">
        <!-- 左侧导航栏 -->
        <el-aside :width="collapse?'64px':'200px'" class="left">
          <div class="toggle-button" @click='toggtlecollapse'>|||</div>
          <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409eff"
            unique-opened
            :collapse="collapse"
            :collapse-transition="false"
            router
           
            :default-active="activepath"
          >
          <!-- 一级菜单 -->
            <el-submenu :index="item.id+''" v-for="item in leftMenuData" :key="item.id">
              <template slot="title">
                <i :class="leftIconObj[item.id] "></i>
                <span>{{item.authName}}</span>
              </template>
              <!-- 二级菜单 -->
                <el-menu-item :index="'/'+value.path" v-for="value in item.children" :key='value.id' @click="saveNavPath('/'+value.path)">
                  <template slot="title">
                <i class="el-icon-menu " ></i>
                <span>{{value.authName}}</span>
              </template>
                </el-menu-item>

            </el-submenu>


          </el-menu>
        </el-aside>

        <!-- 右侧显示区域 -->
        <el-main class="right">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
           
<script>
export default {
  data() {
    return {
      // 左侧菜单栏数据
      leftMenuData:[],
      // 左侧一级导航图标
      leftIconObj:{
        '125':'iconfont icon-user',
        '103':'iconfont icon-tijikongjian',
        '101':'iconfont icon-shangpin',
        '102':'iconfont icon-danju',
        '145':'iconfont icon-baobiao'
      },
      collapse:false,
      // 左侧导航栏默认激活的地址
      activepath:''
    };
  },
  methods: {
    // 退出
    logout() {
      sessionStorage.removeItem('token');
      this.$router.push('/login');
    },
    // 获取左侧菜单栏接口
    async getLeftMenu(){
     let{data:res}= await this.axios.get('menus');
    //  console.log(res);
     if(res.meta.status!==200) {
       return this.$message.error('请求左侧菜单栏数据出错,请重试')
     }
     this.leftMenuData=res.data;
    //  console.log( this.leftMenuData);
    },
    // 点击切换左侧菜单的折叠与展开
    toggtlecollapse(){
      // console.log(11);
      // console.log(this.collapse);
      this.collapse=!this.collapse
    },
    // 点击二级菜单的时候保存对应的二级菜单路径
    saveNavPath(path){
      localStorage.setItem('path',path);
      this.activepath=path;
    }
  },
  mounted(){
    this.getLeftMenu();
    // 获取左侧导航栏默认激活的路径
    this.activepath=window.localStorage.getItem('path')
  }
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
}
.box_container {
  width: 100%;
  height: 100%;
  display: fllex;
  .header {
    width: 100%;
    height: 80px;
    background-color: #373d41;
    display: flex;
    align-items: center;
    .logo {
      padding: 0 10px;
      display: flex;
      vertical-align: middle;
      border-radius: 50%;
      img {
        width: 80px;
        height: 100%;
        border-radius: 50%;
      }
      p {
        padding-left: 20px;
        font-size: 24px;
        line-height: 80px;
        font-weight: 700;
        color: #fff;
      }
    }
    margin: 0;
    padding: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    .el-button {
      margin-right: 10px;
    }
  }
  .bodyconiter {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    .left {
      width: 200px;
      height: 100%;
      background-color: #333744;
    }
    .right {
      flex: 1;
      // background-color: aqua;
    }
  }
}
.el-menu  {
  border-right: none;
}
.iconfont {
  margin-right:10px;
}
.toggle-button {
  background-color: #4a5064;
  color:#fff;
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 10px;
  line-height: 24px;
  cursor: pointer;
}
</style>
